<template>
  <view class="bottom-nav">
    <view class="nav-item" @click="goToHome">
      <image :src="activeTab === 'home' ? '/static/img/index1.svg' : '/static/img/index.svg'"></image>
      <text :class="['nav-text', activeTab === 'home' ? 'active' : '']">首页</text>
    </view>
    <view class="nav-item" @click="goToInternship">
      <image :src="activeTab === 'internship' ? '/static/img/shixi1.svg' : '/static/img/shixi.svg'"></image>
      <text :class="['nav-text', activeTab === 'internship' ? 'active' : '']">实习生</text>
    </view>
    <view class="nav-item" @click="goToTalentSearch">
      <image :src="activeTab === 'talent' ? '/static/img/find.svg' : '/static/img/find1.svg'"></image>
      <text :class="['nav-text', activeTab === 'talent' ? 'active' : '']">找人才</text>
    </view>
    <view class="nav-item" @click="goToInterviewInvitation">
      <image :src="activeTab === 'interview' ? '/static/img/interview1.svg' : '/static/img/interview.svg'"></image>
      <text :class="['nav-text', activeTab === 'interview' ? 'active' : '']">面试邀请</text>
    </view>
    <view class="nav-item" @click="goToPersonalCenter">
      <image :src="activeTab === 'mine' ? '/static/img/mine1.svg' : '/static/img/mine.svg'"></image>
      <text :class="['nav-text', activeTab === 'mine' ? 'active' : '']">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    activeTab: {
      type: String,
      default: "home", // 默认选中首页
    },
  },
  methods: {
    goToHome() {
      uni.redirectTo({ url: "/pages/enterprise/home" });
    },
    goToInternship() {
      uni.redirectTo({ url: "/pages/internship/index" });
    },
    goToTalentSearch() {
      uni.redirectTo({ url: "/pages/talent-search/index" });
    },
    goToInterviewInvitation() {
      uni.redirectTo({ url: "/pages/interview-invitation/index" });
    },
    goToPersonalCenter() {
      uni.redirectTo({ url: "/pages/enterprise/personal-center/index" });
	  console.log('Go to personal center');
    },
  },
};
</script>

<style scoped>
.bottom-nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #ccc;
}

.nav-item {
  text-align: center;
  cursor: pointer;
}

.nav-item image {
  width: 24px;
  height: 24px;
}

.nav-text {
  font-size: 12px;
  color: #666;
  display: block;
  margin-top: 4px;
}

.nav-text.active {
  color: #000; /* 选中状态的颜色 */
}
</style>